<template>
    <div class="container">
      <Category title="美食">
        <img slot="center" src="favicon.ico">
        <a  slot="footer" href="https://gitee.com/galimifano">更多美食</a>
      </Category>
      <Category title="游戏">
        <ul slot="center">
          <li v-for="(g,index) in games" :key="index">
            {{g}}
          </li>
        </ul>
        <div class="foot" slot="footer">
          <a   href="https://gitee.com/galimifano">单机游戏</a>
          <a   href="https://gitee.com/galimifano">网络游戏</a>
        </div>
      </Category>
      <Category title="电影">
       <video slot="center" controls src="http://video.mtime.com/82308/?mid=270992"></video>
        <template slot="footer">
        <div class="foot" >
          <a   href="https://gitee.com/galimifano">经典</a>
          <a   href="https://gitee.com/galimifano">热门</a>
          <a   href="https://gitee.com/galimifano">推荐</a>
        </div>
        <h4>欢迎前来观影</h4>
        </template>
      </Category>
    </div>
</template>
<script>
import Category from "@/components/day13 插槽/02/Category";
export default {
  name:'App',
  components: {Category},
  data(){
    return{
      foods:['火锅','烧烤','烤肉','米粉'],
      games:['LOL','CF','人类一败涂地','绝地求生'],
      films:['《教父》','《拆弹专家》','《速度与激情》','《西红柿首富》']
    }
  }
}
</script>
<style>
.container{
  display: flex;
  justify-content: space-around;
}
img{
  width: 100%;
}
video{
  width: 100%;
}
.foot{
  display: flex;
  justify-content: space-around;
}
h4{
  text-align: center;
}
</style>